<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" :backFunc="isShare ? backFunc : ''" title="物业信息"></xk-header>
		<view class="data-list">
			<view class="data-item">
				<uni-swiper-dot class="swiper-dot" :info="images" :current="index" field="content" mode="round"
					:dotsStyles="{selectedBorder: 0,bottom: 40, selectedBackgroundColor: '#fff'}">
					<swiper v-if="images.length > 0" class="swiper" autoplay="true" :circular="true"
						@change="(e)=>{
							this.index = e.target.current
						}" :current="index">
						<swiper-item v-for="image of images" :key="images.indexOf(image)">
							<image mode="aspectFill" class="banner-item" :src="image | formatImgPath"/>
						</swiper-item>
					</swiper>
					<swiper v-else class="swiper" autoplay="true" :circular="true"
						@change="(e)=>{
							this.index = e.target.current
						}" :current="index">
						<swiper-item >
							<image mode="aspectFill" class="banner-item" :src="(imgUrl+'/wx/default_img.jpg')"/>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="info">
					<view>
						<view class="name">{{data.tag_name || "-"}}</view>
						<view v-if="data.room_price" class="amount"><text></text>{{(data.room_price || "") | formatMoneyNo00}}元/㎡</view>
					</view>
					<view class="location-view">
						<image mode="aspectFill" class="dingwei" :src="(imgUrl+'/wx/dingwei.png')"/>
						<view class="address">{{data.building}}栋{{data.storey}}层</view>
					</view>
					<view class="grid-info">
						<view class="grid-item">
							<view class="desc">建筑面积</view>
							<view class="desc-content">{{data.sharing_area}}㎡</view>
						</view>
						<view class="info-line-view"></view>
						<view class="grid-item">
							<view class="desc">可租用面积</view>
							<view class="desc-content">{{data.floor_area || "0"}}㎡</view>
						</view>
						<view class="info-line-view"></view>
						<view class="grid-item">
							<view class="desc">月租</view>
							<view v-if="data.pricing_amount" class="desc-content amount">{{(data.pricing_amount || "面议") | formatMoneyNo00}}元</view>
							<view v-else class="desc-content amount">面议</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="content-title"><view class="title-icon"></view>物业信息</view>
			<view class="list-item item-border">
				<view>物业编号:</view>
				<view class="title1">{{data.property_code}}</view>
			</view>
			<!-- <view class="list-item">
				<view>物业楼栋:</view>
				<view class="title1">{{data.building}}楼</view>
			</view>
			<view class="list-item">
				<view>物业楼层:</view>
				<view class="title1">{{data.storey}}层</view>
			</view> -->
			<view class="list-item">
				<view>物业用途:</view>
				<view class="title1">{{propertyUseMapping[data.property_use]}}</view>
			</view>
			<!-- <view class="list-item">
				<view>发布日期:</view>
				<view class="title1">{{data.publish_date || ""}}</view>
			</view> -->
			<view class="list-item">
				<view>
					物业简介:
				</view>
				<text class="title1" space="nbsp">
					{{data.property_profile || "无"}}
				</text>
			</view>
		</view>

		<view class="bottom-empty-view"> </view>

		<!-- <view class="bottom-view">
			<view class="btn-view">
				<view class="common-btn btn-sty2 btn" @click="joinAppt()">
					{{
						unDoneLookingRoomList.indexOf(data.property_id) >= 0
						? "待看房"
						: isInShoppingCart
						? "已入看房购物车"
						: "加入看房购物车"
					}}
				</view>
				<view class="common-btn btn" @click="makeAppt()"
					v-if="unDoneLookingRoomList.indexOf(data.property_id) < 0 ">
					{{completeLookingRoomList.indexOf(data.property_id) >= 0 ? "再次预约" : "立即预约"}}
				</view>
			</view>
		</view> -->

		<shopping-cart ref="shoppingCart" class="shopping-cart" :style="{top: cartTop + 'px'}"/>

		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				isShare: false,
				cartTop: 0,
				index: 0,
				images:[],
				data: {},
				isInShoppingCart: false,
				unDoneLookingRoomList: [],
				completeLookingRoomList: [],
				propertyUseMapping:{
					5:'产房',
					30:'办公',
					10:'商业',
					20:'住宅',
					60:'公寓',
					50:'酒店',
					70:'车位',
					80:'其他'
				}
			};
		},
		onShow() {
			this.$refs.shoppingCart.refresh()
			this.initInfo()
		},
		onLoad(options) {
			uni.showShareMenu({menus: ["shareAppMessage","shareTimeline"]});
			console.log('options=======',options)
			if(options.share == '1'){
				this.isShare = true
			}
			console.log('isShare=======',this.isShare)
			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("物业信息：", this.data)
				if (this.data.property_image) {
					let property_images = this.data.property_image.split(';');
					for (let property_image of property_images) {
						if (!property_image) continue

						this.images.push(property_image)
					}
					// if(this.images.length == 0){
					// 	this.images.push('/static/default_img.png')
					// }
				}
		
			}

			this.$util.getElRect(".bottom-view").then(rect => {
				this.cartTop = rect.top - 80;
				console.warn("carTop: ", this.cartTop)
			});
		},
		onShareAppMessage: function () {
			 //微信设置可以转发
			return {
				//title: '分享标题',
				path: '/pages/estate/estate-info?share=1&data='+ JSON.stringify(this.data)// 路径，传递参数到指定页面。
			}
		},

		methods:{
			backFunc(){
				uni.reLaunch({
					url: '/pages/home/index/index'
				})
			},
			initInfo(){
				this.isInShoppingCart = this.$util.checkIsInShoppingCart(this.data.property_id)
				this.$api.piLookingRoom_getPiLookingRoomList().then(res=>{
					console.warn("查询预约看房列表: ", res)
					if (res.unDoneLookingRoomList) {
						for (let item of res.unDoneLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									this.unDoneLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}
					if (res.completeLookingRoomList) {
						for (let item of res.completeLookingRoomList) {
							if (item.pi_looking_property_dets) {
								for (let propertyItem of item.pi_looking_property_dets) {
									if (item.jd_status == "COMPLETE")
										this.completeLookingRoomList.push(propertyItem.property_id);
								}
							}
						}
					}

					console.warn("未完成看房列表: ", this.unDoneLookingRoomList)
					console.warn("已完成看房列表: ", this.completeLookingRoomList)
				})
			},
			joinAppt() {
				if (!this.checkIsLogin()) return;

				if (this.$util.checkIsInShoppingCart(this.data.property_id)) {
					// this.$util.toast("已加入看房购物车");
					return
				}

				if (this.completeLookingRoomList.indexOf(this.data.property_id) >= 0 ) {
					// this.$util.toast("已完成看房");
					return
				}
				if (this.unDoneLookingRoomList.indexOf(this.data.property_id) >= 0 ) {
					// this.$util.toast("已加入预约列表，待看房");
					return
				}

				this.$util.addShoppingCart(this.data)
				this.isInShoppingCart = true
				this.$util.toast("已加入看房购物车");

				this.$refs.shoppingCart.refresh()

				// this.$util.post({
				// 	url: "piLookingRoom/apply",
				// 	data: {
				// 		isSubmit: false,
				// 		startTime: "",
				// 		leasePurpose: "",
				// 		property_remark: "",
				// 		assetsPropertyIds: [this.data.property_id]
				// 	}
				// }).then((res)=>{
				// 	console.warn("加入预约列表：", res);
				// 	this.$util.toast("已加入待预约列表");
				// 	this.initInfo()
				// });
			},
			makeAppt() {
				if (!this.checkIsLogin()) return;

				uni.navigateTo({
					url: "/pages/estate/make-appt-house?data=" + JSON.stringify(this.data)
				})
			},
			checkIsLogin() {
				if (!this.$util.isLogin()) {
					this.$util.confirm({
						content: "请先登录",
						confirmText: "立即登录"
					}).then((isConfirm)=>{
						if (isConfirm) {
							this.$refs.loginPopup.show()
						}
					})
					return false
				}
				return true
			},
			goCartList() {
				uni.navigateTo({
					url: "/pagesC/shopping-cart/shopping-car-list"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.data-list{
	border-radius: 10rpx;
	height: 100%;
	.data-item{
		display: flex;
		flex-direction: column;

		.swiper {
			display: flex;
			width: 100%;
			height: 562rpx;
			.banner-item {
				width: 100%;
				height: 100%;
			}
		}

		.info{
			flex: 1;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: -50rpx 30rpx 0rpx 30rpx;
			padding: 20rpx;
			z-index: 1;

			>view {
				display: flex;
				align-items: center;
			}
			.location-view {
				margin-top: 20rpx;
				align-items: flex-start;
				.dingwei {
					width: 30rpx;
					height: 30rpx;
					margin-top: 5rpx;
				}
				.address {
					font-size: 24rpx;
					color: #999999;
					margin-left: 10rpx;
				}
			}
			.grid-info{
				margin-top: 30rpx;
				.grid-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;

				}
				.info-line-view {
					display: inline-block;
					width: 2rpx;
					height: 75rpx;
					background-color: #EEEEEE;
				}

			}
			.name{
				flex: 1;
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;
			}
			.desc{
				font-size: 28rpx;
				color: #999999;
			}
			.desc-content {
				font-size: 32rpx;
				color: #333333;
				margin-top: 10rpx;
			}
			.amount{
				font-size: 32rpx;
				color: #FF3737;
				font-weight: bolder;
			}

		}
	}
}

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.content-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 32rpx 0rpx;
		.title-icon{
			width: 12rpx;
			height: 40rpx;
			background-color: #2C72FF;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			margin-right: 10rpx;
		}
	}
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;

		color: #999999;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		.title1 {
			flex: 1;
			color: #333;
			margin-left: 10rpx;
		}
		.desc-view {
			:last-child {
				color: #666;
				font-size: 24rpx;
			}
		}
	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
}

.bottom-empty-view {
	height: 200rpx;
}

.bottom-view {
	background-color: #FFFFFF;
	position: fixed;
	width: 750rpx;
	bottom: var(--window-bottom);
}

.btn-view {
	display: flex;
	justify-content: space-around;
	flex: 1;

	.btn {
		flex: 1;
		padding: 0rpx 20rpx;
	}
}


</style>
